{% extends 'base.html' %}
{% import 'bootstrap/wtf.html' as wtf %}

{% block title %}
    {{ title }}
 {% endblock %}

{% block content %}
    <div class="container">
  
        <form action="" method="post" name="dailyForm" onsubmit="return check()">

        <div class=table-responsive">
        <table id="myTable" class="table table-hover">
            <thead>
            <tr>
                <th>事项</th>
                <th>事项详情</th>
                <th>状态</th>
                <th>计划完成时间</th>
            </tr>
            </thead>
            <tbody>
                <tr>
                    <td><input type="text" id="daily1_1" name="daily[1].item"/></td>
                    <td><input type="text" id="daily1_2" name="daily[1].detail"/></td>
                    <td><input type="text" id="daily1_3" name="daily[1].status"/></td>
                    <td><input type="text" id="daily1_4" name="daily[1].finshtime"/></td>
                </tr>
            </tbody>
        </table>
        </div>
		<input type="button" class="btn btn-sm btn-primary" value="增加行" id="addRow"/>
		<input type="button" class="btn btn-sm btn-danger" value="删除行" onclick="delRow()"/>
		<input type="submit" class="btn btn-sm btn-success" value="提交"/>
        </form>
		
    </div>
{% endblock %}
{% block scripts %}
 {{ super() }}
<script type="text/javascript">
    $(function () {
        var nowDate = new Date();
        var year = nowDate.getFullYear();
        var month = nowDate.getMonth() + 1 < 10 ? "0" + (nowDate.getMonth() + 1): nowDate.getMonth() + 1;
        var day = nowDate.getDate() < 10 ? "0" + nowDate.getDate() : nowDate.getDate();
        var dateStr = year + "-" + month + "-" + day;

       function initDatePicker(ele){
		ele.datepicker({
		language:  "zh-CN",
                 autoclose: true,
                 startView: 0,
                 format: "yyyy-mm-dd",
                 clearBtn:true,
                 todayBtn:false,
	})
	}
        $("#daily1_4").val(dateStr);
	    initDatePicker($("#daily1_4"));
        //var i =2;
        $("#addRow").click(function(){
		    var rowNums = $("tr").size();
		    if (rowNums>5){return false;}
            var html = "<tr>"+
                       "<td>"+"<input type='text' id='daily"+rowNums+"_1' name='daily["+rowNums+"].item'/>" +"</td>"+
                       "<td>"+"<input type='text' id='daily"+rowNums+"_2' name='daily["+rowNums+"].detail'/>" +"</td>"+
                       "<td>"+"<input type='text' id='daily"+rowNums+"_3' name='daily["+rowNums+"].status'/>" +"</td>"+
                       "<td>"+"<input type='text' id='daily"+rowNums+"_4' name='daily["+rowNums+"].finshtime'/>" +"</td>"+
                        "</tr>"

		    $(html).appendTo("#myTable");
		    $("#daily"+rowNums+"_4").val(dateStr);
		    initDatePicker($("#daily"+rowNums+"_4"));
	});



    });


	 function delRow(){
            var rowNums = document.getElementById("myTable").rows.length;
			if (rowNums > 2){
            var dRow = document.getElementById("myTable").deleteRow(rowNums-1); 
			}
		};
	function check() {
		var rowNums = document.getElementById("myTable").rows.length;
			for (var i=1; i<rowNums; ++i){
			   /* var a = "daily" + i + "_" + "3"
			    console.log(a);
			    var obj = document.getElementById("daily" + i + "_" + "3");
			    var data = obj.value;

			    if (!data.endsWith("%") || data.length>4){
                    alert("状态格式不对!");
                    return false;
                }*/
				for (var j=1; j<5; ++j){
				    var data = document.getElementById("daily" + i + "_" + j);
				    if (j == 3){
				        var a = parseInt(data.value.replace("%", ""))
                        console.log(a);
				        if (!data.value.endsWith("%") || data.value.startsWith("0") || data.value.startsWith("-") || a>100 || a<1){
                            $.alert({
                                type:'red',
                                title: '系统提示',
                                content: "状态格式不对!",
                                //icon:'glyphicon glyphicon-info-sign'
                                });
                            return false;
                        }
                    }

					if (data.value == ""){
				        $.alert({
                                type:'red',
                                title: '系统提示',
                                content: "内容不能为空！"
                                //icon:'glyphicon glyphicon-info-sign'
                                });
						return false;
				}
				}
			}
		}
</script>
{% endblock %}
